<template>
  <div id='ListDetail'>
    <div class='L-header'>
      <div class='imgBox'>
        <img v-if='listInfo.playlist' :src='`${listInfo.playlist.coverImgUrl}?param=150y150`'>
      </div>
      <div class='title'>
        <h2 v-if='listInfo.playlist'>{{ listInfo.playlist.name }}</h2>
        <i class='el-icon-time'></i><span>最近更新：{{ trackUpdateTime }}</span><br>
        <el-button icon='el-icon-video-play' type='primary' @click="changeMusiclist">播放</el-button>
        <el-button icon='el-icon-folder-add' plain v-if='listInfo.playlist'>
          ({{ listInfo.playlist.subscribedCount }})
        </el-button>
        <el-button icon='el-icon-chat-line-round' plain v-if='listInfo.playlist'>
          ({{ listInfo.playlist.commentCount }})
        </el-button>
      </div>
    </div>

    <!-- 歌单的一些信息 -->
    <div class='table_title'>
      <div>
        <h3 style='display: inline-block'>歌曲列表</h3>
        <span style='font-size: 12px' v-if='listInfo.playlist'> {{ listInfo.privileges.length }}首歌</span>
      </div>
      <div style='font-size: 12px' v-if='listInfo.playlist'>
        播放: {{ listInfo.playlist.playCount }}次
      </div>
    </div>
    <hr color='#C20C0C'>
    <!-- 歌单 -->
    <el-table :data='songs' stripe class='songs-table' style='width: 100%;min-height: 500px' size='mini' max-height='1000px'>
      <el-table-column type='index' width='77'>
      </el-table-column>
      <el-table-column prop='name' label='歌名' width='326'>
        <template v-slot='scope'>
          <el-button icon='el-icon-service' type='text' @click="changeMusic(scope.row)"></el-button>
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label='时长' width='91'>
        <template v-slot='{ row }'>
          <span>{{ formatSongTime(row.dt) }}</span>
        </template>
      </el-table-column>
      <el-table-column label='歌手' show-overflow-tooltip>
        <template v-slot='{ row }'>
          <span v-for='(item,index) in row.ar' :key="item.id" style="cursor:pointer">
           <i v-if="index>0">/</i> {{ item.name }} </span>
        </template>
      </el-table-column>
    </el-table>

    <Comment :id='listId' :type='2' />
  </div>
</template>

<script>
import dayjs from 'dayjs'
import { formatSongTime } from '@/utils'

export default {
  name: 'ListDetail',
  data() {
    return {
      listId: 19723756,
      listInfo: {},
      songs: [],
    }
  },
  methods: {
    async getListDetail() {
      let result = await this.$API.listDetail(this.listId)
      let ids = ''
      if (result.status === 200) {
        this.listInfo = result.data
        this.listInfo.privileges.forEach(item => {
          ids += item.id + ','
        })
        ids = ids.slice(0, -1)
        let res = await this.$API.songDetail(ids)
        this.songs = res.data.songs
      }
    },
    formatSongTime,
    // 改变当前播放音乐
    changeMusic(row) {
      this.$bus.$emit('changeMusic', row)
    },
    // 改变当前播放列表
    changeMusiclist() {
      this.$bus.$emit('changeMusiclist', this.songs)
    },
  },
  beforeMount() {
    // 获取榜单id 默认飙升榜
    this.listId = this.$route.query.id * 1 || 19723756
    this.getListDetail()
  },
  watch: {
    '$route'() { // 监视路由信息 更新榜单id
      this.listId = this.$route.query.id * 1 || 19723756
      this.getListDetail()
    },
  },
  computed: {
    trackUpdateTime() {
      if (this.listInfo.playlist) {
        return dayjs(this.listInfo.playlist.updateTime).format('YYYY-MM-DD')
      } else {
        return ''
      }

    },
  },
}
</script>

<style scoped lang='less'>
#ListDetail {
  border: 1px solid #e6e6e6;
  width: 770px;
  padding: 0 30px 40px 40px;

  .L-header {
    margin-top: 40px;
    width: 100%;
    display: flex;

    .imgBox {
      width: 158px;
      height: 158px;
      padding: 3px;
      border: 1px solid #cccccc;
    }

    .title {
      margin-left: 20px;

      h2 {
        margin: 15px 0;
      }

      span {
        font-size: 12px;
      }

      button {
        margin-top: 15px;
      }
    }
  }

  .table_title {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 40px;
  }
}
</style>